import React, {Component, useEffect, useMemo, useState} from 'react';
import axios from "axios";
import {logDOM} from "@testing-library/react";

export function Cinema() {
    const [text, settext] = useState('')
    const [list, setlist] = useState([])

    useEffect(()=>{
        axios({
            url: "https://m.maizuo.com/gateway?cityId=440600&ticketFlag=1&k=7560596",
            method:'get',
            headers: {
                'X-Client-Info': ' {"a":"3000","ch":"1002","v":"5.2.1","e":"17079850121452910126825473","bc":"440600"}',
                'X-Host': 'mall.film-ticket.cinema.list'
            }
        }).then(res => {
            setlist(res.data.data.cinemas)
        }).catch((err) => {

        })
    },[list])



   /* const getCinemaList = useMemo(()=>
        list.filter(item=> item.name.toUpperCase().includes(text.toUpperCase()) || item.address.toUpperCase().includes(text.toUpperCase()))
    ,[list,text])*/


    const getCinemaList = useMemo(() => {
        return (
            list.filter(item=> item.name.toUpperCase().includes(text.toUpperCase()) || item.address.toUpperCase().includes(text.toUpperCase()))
        )
    }, [list,text]);

    return(
        <div>
            <input type="text" value={text} onChange={(event)=>{
                settext(event.target.value)
            }}/>
            {
                getCinemaList.map(item=>
                    <dl key={item.cinemaId}>
                        <dt>{item.name}</dt>
                        <dd>{item.address}</dd>
                    </dl>
                )
            }
        </div>
    )
}

export default Cinema;
